import React from 'react'
import { useNavigate } from 'react-router-dom'
import { loginApi } from '../apis/users';
import { getMenusApi } from '../apis/menus';
import { Button, Checkbox, Form, Input } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import '../assets/styles/login.less'
import { useSelector,useDispatch } from 'react-redux';
export default function Login() {
    const navigate = useNavigate()
    const dispatch = useDispatch()
    const onFinish = (values) => {
        console.log('Success:', values);
        loginApi(values).then(res => {
            const { user, token, permissions } = res.data
            localStorage.user = JSON.stringify(user)
            localStorage.token = token
            // localStorage.permissions = JSON.stringify(permissions)
            // console.log(res);
            // getMenusApi(res.data.user.username).then(res=>{
            //     console.log(res);
            // })
            dispatch({
                type:'avatarModule/changeAvatar',
                payload:user.avatar
            })
            navigate('/home')
        }).catch(err => {
            console.log(err);
        })

    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    return (
        <div className='f-c-c bg' style={{ height: '100vh' }}>
            <div>
                <div className='title'>
                    <img src="http://xawn.f3322.net:8002/distremote/static/img/logo.png" alt="" />
                    <h1>赤兔养车</h1>
                </div>
                <Form style={{ width: 300 }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item

                        name="username"
                        rules={[
                            {
                                required: true,
                                message: '请填写账号',
                            },
                        ]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} />
                    </Form.Item>

                    <Form.Item

                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请填写密码',
                            },
                        ]}
                    >
                        <Input.Password prefix={<LockOutlined className="site-form-item-icon" />} />
                    </Form.Item>


                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>

        </div>
    )
}
